<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-08 17:54:20
 * @LastEditTime: 2023-06-30 16:22:05
-->
<script lang="ts" setup name="BaseModalSort">
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
import { DCaret } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { _ } from 'iking-utils'
import { formApi } from '@/MainApp/apis/approve-center'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'group' // group form
  }
})

const emits = defineEmits(['update:modelValue', 'change'])
const loading = ref(false)
const isShow = computed(() => props.modelValue)
const treeRef: Ref<any | null> = ref(null)
const sortData = computed(() => _.cloneDeep(props.data))

const handSortGroup = async (param: any) => {
  loading.value = true
  try {
    const { success, msg } = props.type === 'group' ? await formApi.sortGroup(param) : await formApi.sortForm(param)
    if (success) {
      ElMessage.success(msg)
      emits('change')
    }
    else {
      ElMessage.error(msg)
      treeRef.value!.store.root.data = _.cloneDeep(props.data)
    }
    loading.value = false
  }
  catch (error) {
    loading.value = false
  }
}

const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType
) => {
  const param = {
    parentId: '',
    targetParentId: '',
    currentId: draggingNode.data.id,
    currentOrder: draggingNode.data.sortOrder,
    targetId: dropNode.data.id,
    targetOrder: dropNode.data.sortOrder,
    position: dropType.toLocaleUpperCase()
  }
  handSortGroup(param)
}

const handleClose = () => {
  emits('update:modelValue', false)
}

const allowDrop = (node: any, dropNode: any, type: string) => {
  return type !== 'inner'
}
</script>

<template>
  <el-dialog
    v-model="isShow"
    class="iflow_base-sort-modal"
    draggable
    :title="title"
    width="500"
    @close="handleClose"
  >
    <el-tree
      ref="treeRef"
      v-loading="loading"
      :allow-drop="allowDrop"
      :allow-drag="() => true"
      :data="sortData"
      draggable
      default-expand-all
      node-key="id"
      :props="{ label: 'name' }"
      @node-drop="handleDrop"
    >
      <template #default="treeData">
        <span>{{ treeData.data.name }}</span>
        <el-icon size="16"><DCaret /></el-icon>
      </template>
    </el-tree>
  </el-dialog>
</template>

<style lang="scss">
.iflow_base-sort-modal {
  .el-tree .el-icon svg{
    color: unset;
    background-image: none !important;
  }

  .el-tree-node__content {
    margin-bottom: 8px;
    background: var(--ik-component-bg);
    padding: 8px;
    justify-content: space-between;
    cursor: move;
    transition: all 0.25s;
    box-sizing: content-box;

    &:hover {
      background-color: var(--el-color-primary-light-7);
    }

    span {
      display: inline-block;
      padding-left: 8px;
    }

    i:first-child {
      display: none;
    }

    i {
      color: var(--el-tree-text-color);
    }
  }
}
</style>
